使用 npm 对前端开发来说已经是必备技能，但是在公司中一般都会搭建公司内部的私有镜像，那么如何使用私有镜像上的模块及发布私有镜像呢？

私有 npm 镜像

1.由于公司内部的 npm 包要上传到公司的私有镜像源，所以首先将 npm 的 registry 重新设置

1
npm set registry=xxxx // 私有镜像源

2.为了保证能够发布 npm 包，需要有一个 npm 账号

1
npm adduser --registry=http://registry.npm.baidu-int.com

npm 包目录结构

一个完整的 npm 包应该由源码、编译后代码、测试用例、文档等组成。

如下图：

图片

其中，我们选择使用 ES Module 进行开发，于是选择使用 rollup将代码编译到 cjs,amd等现代浏览器能够支持的模块规范。同时使用 rollup-plugin-babel使我们能够在浏览器不支持的情况下使用箭头函数等新语法。由于 Babel 默认只转换新的 JavaScript 语法，而不转换新的 API。我们再引入 babel-plugin-transform-runtime 插件使我们能够使用 Promise 等新 API。

针对不同的前端模块化方式，我们分别构建不同的文件。
/dist.dev.js生成的格式为 umd，能够支持直接 script 标签引入和模块语法引入。/dist.common.js生成的格式为 common js，支持 common js 规范的加载器引用这个，如 Webpack & Browserify。/dist.esm.js生成的格式为 ES Modules，支持 ES Modules 规范的加载器引用这个，如Webpack2+ & rollup。

发布

由于公司的镜像只支持发布 @baidu 这个 scope 的私有包，所以 package.json 需要需改一下，name 需要加上 scope。目前的 scope 只支持 baidu。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
  "name": "@baidu/hades",
  "version": "1.0.3",
  "description": "hades bridge",
  "main": "dist/hades.common.js",
  "module": "dist/hades.esm.js",
  "directories": {
    "doc": "doc",
    "example": "example",
    "test": "test"
  },
  "scripts": {
    "build": "rollup --config rollup.config.js --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "xxx" // 代码仓库地址
  },
  "keywords": [
    "bridge",
    "wenku",
    "Hades"
  ],
  "author": "xxxx",
  "files": [
	"src",
    "dist",
    "types/*.d.ts",
    "types/*.json"
  ],
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "rollup": "^0.58.2",
    "rollup-plugin-babel": "^3.0.4",
    "rollup-plugin-commonjs": "^9.1.0",
    "rollup-plugin-node-resolve": "^3.3.0",
    "rollup-watch": "^4.3.1"
  },
  "dependencies": {
    "whatwg-fetch": "^2.0.4"
  }
}

更新包的话，coding 完了千万不要直接发布，这里我们需要修改 package.json中 的version版本号，但不能直接修改。

修改之前先说下 npm 维护 package 版本的规则 x.y.z：

  1. x 表示主版本号,通常有重大改变或者达到里程碑才改变
  2. y 表示次要版本号,或二级版本号,在保证主体功能基本不变的情况下,如果适当增加了新功能可以更新此版本号
  3. z 表示尾版本号或者补丁号,一些小范围的修修补补就可以更新补丁号

对应到 npm 的用法为：

1
2
3
npm version patch // z++
npm version minor // y++ && z=0
npm version major // x+= && y=0 && z=0

执行 npm version 的会自动生成对应的版本号并更新 package.json
，同时在配置了 git 仓库的情况下，会自动生成一个 commit，内容为对应的版本号。

所以，一般更新版本的步骤为：

1
2
3
4
5
6
7
npm run build
git add .
git commit -m 'xxx'
npm version patch // 或者 npm version minor，npm version major
git push origin HEAD:refs/for/master
git push origin vx.x.x // npm publish 时会自动生成本地 tag（tag 名称为版本号），手动把 tag 发布到远程仓库
npm publish

如何在YOG2项目里使用 npm

在 YOG2 项目可以直接启用 FIS3 配置来使用 npm：

1
2
3
4
// fis3-enable
fis.enableNPM({
    autoPack: true
});

然后在 client 目录下执行

1
npm install @baidu/hades --save --registry=xxx

这时 client 目录下会新增 package.json 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "test",
  "version": "0.0.1",
  "description": "test",
  "author": "xxx",
  "private": true,
  "scripts": {
    "test": ""
  },
  "dependencies": {
    "@baidu/hades": "^1.0.3"
  }
}

这样在前端直接使用 require('@baidu/hades')就会直接去node_modules里面寻找同名的包了。

同时，如果启用了 fis3-parser-babel-6.x 插件的话，也可以通过 ESModuels 引入。

1
2
3
4
'client/{components,view}/**.js': {
    parser: fis.plugin('babel-6.x'),
    isMod: true
}
1
import Hades from '@baidu/hades';